<template>
  <a-modal :visible="visible" title="流程权限分配" @ok="handleOk" @cancel="handleCancel" @update:visible="handleVisible">
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="角色ID" name="roleId" required>
        <a-input v-model:value="form.roleId" placeholder="请输入角色ID" />
      </a-form-item>
      <a-form-item label="流程Key" name="processKey" required>
        <a-input v-model:value="form.processKey" placeholder="请输入流程Key" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input v-model:value="form.remark" placeholder="备注" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { addRoleProcessPerm, editRoleProcessPerm } from '@/api/workflow/roleProcessPerm.api';
import { message } from 'ant-design-vue';
import { ElMessage } from 'element-plus'
import Icon from '@/components/Icon/Icon.vue'

// 引入统一的夜间模式样式
import '@/components/Workflow/styles/dark-theme.css'

const props = defineProps<{ visible: boolean; record?: any }>();
const emit = defineEmits(['update:visible', 'ok']);

const form = ref({ roleId: '', processKey: '', remark: '' });

watch(
  () => props.visible,
  (val) => {
    if (val && props.record) {
      form.value = { ...props.record };
    } else if (val) {
      form.value = { roleId: '', processKey: '', remark: '' };
    }
  },
  { immediate: true }
);

function handleOk() {
  const api = form.value.id ? editRoleProcessPerm : addRoleProcessPerm;
  api(form.value).then(() => {
    message.success('操作成功');
    emit('update:visible', false);
    emit('ok');
  });
}
function handleCancel() {
  emit('update:visible', false);
}
function handleVisible(val) {
  emit('update:visible', val);
}
</script> 